<template>
  <el-aside id="asideNav" :width="$store.getters.collapse?'auto':'180px'">
    <div class="logo-name">
      <p>{{$store.getters.collapse ? '后台':'外卖商家后端'}}</p>
    </div>

    <el-menu :default-active="currentActive()"
             active-text-color="#ffd04b"
             background-color="#545c64"
             text-color="#fff"
             :router="true"
             :collapse="$store.getters.collapse"
             :unique-opened="true"
             :collapse-transition="false">

      <el-menu-item index="/feedback/list">
        <el-icon><setting /></el-icon>
        <span>工作台</span>
      </el-menu-item>

      <el-menu-item index="/user/list">
        <el-icon><User /></el-icon>
        <span>员工管理</span>
      </el-menu-item>

      <el-menu-item index="/category/list">
        <el-icon><Grid /></el-icon>
        <span>分类管理</span>
      </el-menu-item>

      <el-menu-item index="/flavor/list">
        <el-icon><Box /></el-icon>
        <span>口味管理</span>
      </el-menu-item>

      <el-menu-item index="/food/list">
        <el-icon><Food /></el-icon>
        <span>菜品管理</span>
      </el-menu-item>

      <el-menu-item index="/book/list">
        <el-icon><Tickets /></el-icon>
        <span>订单管理</span>
      </el-menu-item>

      <el-menu-item index="/feedback/list">
        <el-icon><Tickets /></el-icon>
        <span>反馈管理</span>
      </el-menu-item>

      <el-menu-item index="/store/list">
        <el-icon><Tickets /></el-icon>
        <span>店铺管理</span>
      </el-menu-item>


    </el-menu>
  </el-aside>

</template>

<script setup>
  import { useRouter,useRoute } from "vue-router";
  import {useStore} from "vuex"

  //获取路由对象
  const router = useRouter();
  const route = useRoute();
  const store= useStore();

  const currentActive=()=>{
    let path = route.path;
    path = path.substring(0,path.lastIndexOf("/"))+"/list";
    return path;
  }

</script>

<style scoped>
#asideNav {
  display: flex;
  flex-direction: column;
}

#asideNav .logo-name {
  width: 100%;
  height: 50px;
  background-color: #545c64;
}

#asideNav .logo-name p {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  margin: 0px;
  color: #fff;
}

#asideNav .el-menu {
  flex: 1;
  border-right: none;
}
</style>